<template>
	<view v-if="answer">
		<view class="content">
			<rich-text :nodes="question.content == undefined || question.content == null ? '' : question.content" :selectable="false" image-menu-prevent></rich-text>
		</view>
		<view class="answer" v-for="(item,index) in question.answers" :key="index">
			<text id="title">第{{index+1}}空</text>
			<u--textarea id="textarea" @input="update(index,$event)" v-model="contents[index]" maxlength="20" autoHeight count></u--textarea>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'completion',
		data() {
			return {
				contents: []
			}
		},
		created() {
			var arr;
			try {
				arr = JSON.parse(this.$props.answer.content);
			} catch (err) {
				
			}
			if (arr == undefined || arr == null) {
				arr = [];
			}
			if (this.$props.question.answers != undefined && this.$props.question.answers != null) {
				for (var i = 0; i < this.$props.question.answers.length; i++) {
					this.$data.contents[i] = i >= arr.length ? '' : arr[i];
				}
			}
		},
		beforeUpdate() {
			var arr;
			try {
				arr = JSON.parse(this.$props.answer.content);
			} catch (err) {
				
			}
			if (arr == null) {
				arr = [];
			}
			for (var i = 0; i < this.$props.question.answers.length; i++) {
				this.$data.contents[i] = i >= arr.length ? '' : arr[i];
			}
		},
		methods: {
			update: function(index,text) {
				if (this.$props.disabled) {
					return;
				}
				var arr = [];
				for (var i = 0; i < this.$props.question.answers.length; i++) {
					arr.push(this.$data.contents[i]);
				}
				this.$props.answer.content = JSON.stringify(arr);
				this.$props.change(this.$props.question.questionId);
			}
		},
		props: {
			question: {
				type: Object,
				value: {}
			},
			answer: {
				type: Object,
				value: {}
			},
			change: {
				type: Function,
				value: function(questionId) {}
			},
			disabled: {
				type: Boolean,
				value: false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 710rpx;
		margin: 12rpx 20rpx;
		font-size: 36rpx;
	}

	.answer {
		width: 710rpx;
		margin: 12rpx 20rpx;
		
		#title {
			color: $secondary-color;
		}
		
		#textarea {
			margin: 6rpx 0 24rpx;
		}
	}
</style>
